::-webkit-scrollbar {
  width: 0.4rem;
  height: 0.5rem;
  background: #232323;
}
::-webkit-scrollbar-track {
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: #535353;
  transition: all .2s;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #606060;
}

body.one-element-dragged{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.char-node{
}

.rx-_-show-outline{
  outline:dashed #70baf7 1px;
}
  
.rx-_-mouse-overed{
  outline: #a4d762 solid 1px;
}

.rx-_-focused{
  outline: #75b325 solid 2px;
}

.rx-_-editing{
  box-shadow: 2px 2px 5px #75b325;
}

.rx-_-dragged{
  position:relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*遮住内部子元素，不让其响应dragover事件*/
.rx-_-dragged::after{
  content:'';
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(255, 255, 255, 0.7);
  outline:dashed #70baf7 1px;
}

.node-label{
  background-color: #a4d762;
  border:solid #a4d762 1px;
  color:#fff;
  font-size: 12px;
  font-weight: normal;
  line-height: 14px;
  padding: 0px 2px;
  position: fixed;
  height:16px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 10000
}

.node-label.focused{
  background-color: #75b325;
  border:solid #75b325 1px;
  color:#fff;
}

.rx-cursor{
  position: fixed;
  background: #8cdb27;
  border: #fff solid 1px;
  z-index: 10020;
  pointer-events: none;
}

.rx-cursor.out-top::after, .rx-cursor.out-bottom::after{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  top: 0.20rem;
  left: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:#8cdb27 transparent  transparent  transparent;
}

.rx-cursor.out-top::before, .rx-cursor.out-bottom::before{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  top: -0.60rem;
  left: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent transparent #8cdb27  transparent;
}

.rx-cursor.out-right::before, .rx-cursor.out-left::before{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  left: -0.55rem;
  top: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent #8cdb27 transparent  transparent;
}

.rx-cursor.out-left::after, .rx-cursor.out-right::after{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  left: 0.2rem;
  top: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent  transparent  transparent #8cdb27;
}


.rx-cursor.in-top::after{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  top: 0.20rem;
  left: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:#8cdb27 transparent  transparent  transparent;
}

.rx-cursor.in-right::before{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  left: -0.55rem;
  top: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent #8cdb27 transparent  transparent;
}

.rx-cursor.in-bottom::before{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  top: -0.55rem;
  left: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent transparent #8cdb27  transparent;
}

.rx-cursor.in-left::after{
  position: absolute;
  content: '';
  width: 0; 
  height: 0;
  left: 0.2rem;
  top: calc(50% - 2px);
  border-width: 4px;
  border-style: solid;
  border-color:transparent  transparent  transparent #8cdb27;
}

.rx-_-dragover{
  position:relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.node-toolbar{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  background-color: #75b325; 
  color:#fff;
  position: fixed;
  height: 26px;
  /*width: 100px;*/
  z-index: 10002
}

.node-toolbar:hover{
  z-index: 10010;
}

.node-toolbar .rx-button{
  display: inline-block;
  margin:0;
  padding:4px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 2px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-toolbar .rx-button svg{
  width: 14px;
  height: 14px;
}

.node-toolbar .rx-button:hover{
  background: #9bc659;
}

.mouse-follower{
  position: fixed;
  z-index: 999999;
  cursor: pointer;
  pointer-events: none;
  background: #75b325;
  color: #fff;
  padding: 0px 10px;
  padding-bottom: 3px; 
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  height: 24px;
  border-radius: 2px;
}

/*===mini-editbar==>*/
.mini-editor{
  position: relative;
}

.mini-editbar{
  position: fixed;
  display: flex;
  display: -webkit-flex;
  flex-flow:row;
  align-items:center;
  justify-content:center;
  padding:2px;
  background: #313131;
  color:#c2c2c2;
  border-radius: 2px;
  z-index: 10001;
}

.mini-editbar:hover{
  z-index: 10010;
}


.mini-editbar .mini-button{
  font-size: 14px;
  margin:1px;
  text-align: center;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
}

.mini-editbar .icon-button{
  width: 26px;
}

.mini-editbar .mini-button:hover{
  background: #525252;
}

.mini-editbar .mini-button.active{
  background: #525252;
}

.mini-editbar .mini-styles{
  display: flex;
  align-items:center;
  justify-content:space-between;
  line-height: 26px;
  font-size: 12px;
  padding:0 6px;
  cursor: pointer;
  position: relative;
}

.mini-editbar .mini-styles{
  width: 50px;
}

/*<===mini-editbar==*/

.d-rx-none, .rx-invisble{
  position: relative;
}

.d-rx-none::after{
  content:'Hidden';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rx-invisble::after{
  content:'Invisible';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 576px) {
  .d-sm-rx-none{
    position: relative;
  }

  .d-sm-rx-none::after{
  content:'Hidden';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}

@media (min-width: 768px) {
  .d-md-rx-none{
    position: relative;
  }

  .d-md-rx-none::after{
  content:'Hidden';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}
@media (min-width: 992px) {
  .d-lg-rx-none{
    position: relative;
  }
  .d-lg-rx-none::after{
  content:'Hidden';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}
@media (min-width: 1200px) {
  .d-xl-rx-none{
    position: relative;
  }
  .d-xl-rx-none::after{
  content:'Hidden';
  position: absolute;
  top:0;
  left: 0;
  height: 100%;
  width: 100%;
  color:#FFF;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}

